<template>
  <div>
    <h3 id="user-manage-title">用户管理</h3>
    <!--  搜索框  -->
    <div id="search-box">
      <el-button class="batch-insert">批量导入</el-button>
      <el-button class="batch-export">导出</el-button>
      <el-input class="search-key" placeholder="输入查询关键字"></el-input>
      <el-button type="success" class="search-btn">搜索</el-button>
    </div>
    <!--信息-->
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="sequence"
            label="序号"
            width="130">
        </el-table-column>
        <el-table-column
            prop="account"
            label="账号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="nickname"
            label="昵称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作"
            width="360">
          <template>
            <el-button
                size="mini"
                @click="modifyUserInfo()">修改
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="deleteUserInfo()">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页标签  -->
    <!--分页部分  -->
    <div class="paging-box">
      <i class="el-icon-d-arrow-left"></i>
      <i class="el-icon-arrow-left"></i>
      <label><span>1/20</span>页</label>
      <i class="el-icon-arrow-right"></i>
      <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      //table
      tableData: [{
        sequence: 1,
        account: '17129401791',
        nickname: 'XXX',
        name: 'tch',
        sex: '男',
      }, {
        sequence: 2,
        account: '17129401791',
        nickname: 'XXX',
        name: 'tch',
        sex: '男',
      }, {
        sequence: 3,
        account: '17129401791',
        nickname: 'XXX',
        name: 'tch',
        sex: '男',
      }, {
        sequence: 4,
        account: '17129401791',
        nickname: 'XXX',
        name: 'tch',
        sex: '男',
      }]
    }
  },
  methods: {
    //表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    modifyUserInfo() {
      alert("modify");
      this.$router.push("/lessee-center/user-manage/modify-user-info");
    },
    deleteUserInfo(){
      alert("删除成功");
    }
  }
}
</script>

<style scoped>
#user-manage-title {
  text-align: center;
  background-color: #5cb85c;
}

#search-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.search-key {
  width: 60%;
}

.search-btn,
.batch-export,
.batch-export {
  width: 8%;
}

.paging-box{
  position: relative;
  background-color: #5cb85c;
  text-align: right;
}
</style>